<template>
	<div class="login">
		<div class="loginbox">
			<div class="toptitle">
				<div><Icon v-on:click="back" style="font-size:0.55rem;" type="ios-arrow-back"/></div>
				<div><router-link style="font-size=0.2rem;color:#0f1529;" to="../logon/logon">注册</router-link></div>
			</div>
			<div class="logincon">
				<div style="margin-top:1.5rem;display:flex;justify-content:center;">
					<img style="width:1.2rem;height:1.2rem;" src="../../../static/img/mine/logo.png" alt="">
				</div>
				<div  style="margin-top:1rem;">
					<div v-if="loginToggle" class="inputbox">
						<ul>
							<li class="verificationCode">
								<input type="tel" placeholder="请输入手机号">
								<input type="button" style="color:#0f1529;background:none;" value="发送验证码"/>
							</li>
							<li><input type="number" placeholder="请输入短信验证码"/></li>
						</ul>
						<input type="submit" name="" id="" class="submitbtn" value="同意协议并登录" />
						<div @click="toggleLogin" style="text-align:center;font-size:0.25rem;"><span>账号密码登录</span></div>
					</div>
					<div v-else class="inputbox">
						<ul>
							<li><input type="text" placeholder="请输入手机号"></li>
							<li><input type="number" placeholder="请输入短信验证码"/></li>
						</ul>
						<input type="submit" name="" id="" class="submitbtn" value="同意协议并登录" />
						<div class="two">
							<ul style="list-style:none;display:flex;justify-content:center;font-size:0.25rem;">
								<li @click="toggleLogin"><span>手机快捷登录</span></li>
								<li style="border-left:1px solid #DCDCDC;"><span><router-link style="color:#515A6E;" to="/login/findpassword">忘记密码</router-link></span></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="doxieyibox">
					<div class="text">
						<router-link style="color:#9ba3ab;font-size:0.15rem;" to="./login/xieyi">
							<span>注册/登录即代表同意</span>
							<samp style="text-decoration:underline;">《链家用户使用协议》</samp>
						</router-link>
					</div>
				</div>
			</div>
			<div class="dibu"></div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'login',
		data(){
			return{
				loginToggle:true
			}
		},
		methods:{
		  toggleLogin(){
			  this.loginToggle = !this.loginToggle;
		  },
		  back(){
			  this.$router.go(-1);
		  }
		}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.loginbox{
		width:7.5rem;
	}
	.logincon{
		width:6.9rem;
		margin:0.1rem 0.3rem 0.1rem 0.3rem;
	}
	.toptitle{
        width:7.5rem;
		height:0.8rem;
		line-height:0.8rem;
		background-color:white;
		position: fixed;
		top: 0rem;
		left: 0rem;
		padding-left:0.3rem;
		padding-right:0.3rem;
		display: flex;
		justify-content:space-between;
    }
	.inputbox>ul{
		list-style:none;
		display:flex;
		flex-flow:column;
		margin-left:0.2rem;
	}
	.inputbox>ul li{
		width:6.5rem;
		height:0.8rem;
		display:flex;
		margin-bottom:0.3rem;
		border-bottom:1px solid #DCDCDC;
	}
	.inputbox input{
		outline:none;
		border-style:none;
	}
	.verificationCode{
		display:flex;
		justify-content:space-between;
	}
	.submitbtn{
		width:6.5rem;
		height:0.8rem;
		margin-left:0.2rem;
		margin-bottom:0.3rem;
		color:#f1f1f1;
		background-color:#1b996a;
	}
	.two>ul li{
		padding-left:0.2rem;
		padding-right:0.2rem;
	}
	.otherlogin{
		position:fixed;
		left:0.3rem;
		bottom:2rem;
	}
	.othertitle{
		width:6.9rem;
		height:0.5rem;
		display:flex;
		justify-content:center;
	}
	.othertitle>.heng{
		width:2.4rem;
		text-decoration:line-through;
	}
	.othertitle>.methodss{
		width:2rem;
		text-decoration:none;
	}
	.methodss>span{
		font-size:0.3rem;
	}
	.othersrc{
		width:6.5rem;
		display:flex;
		justify-content:center;
	}
	.othersrc>div{
		width:0.75rem;
		height:0.75rem;
		border:1px solid #DCDCDC;
		border-radius:50%;
		margin-top:0.3rem;
		margin-left:0.2rem;
		margin-right:0.2rem;
	}
	.othersrc>div img{
		width:0.5rem;
		height:0.5rem;
		top:50%;
		left:50%s;
		transform:translate(23%,23%);
	}
	.doxieyibox{
		position:fixed;
		left:0.3rem;
		bottom:1.2rem;
		width:6.5rem;
		display:flex;
		justify-content:center;
	}
	.dibu{
		width: 7.5rem;
		height:1.3rem;
		left: 0;
		bottom: 0;
		z-index:999;
		position: fixed;
		background:white;
	}
</style>

